<template>
    <div :style="{height: tabPageHeight+'px', width: '750px'}">
        <main-top-bar :title="title"></main-top-bar>
        <wxc-tab-bar class="wxc-tab-bar" :tab-titles="tabTitles"
                     :tab-styles="tabStyles"
                     :title-type="titleType"
                     @wxcTabBarCurrentTabSelected="wxcTabBarCurrentTabSelected">
            <!-- 第一个页面内容-->
            <div class="item-container" :title="title" :style="contentStyle">
                <!-- 书架 -->
                <book-self :contentHeight="contentHeight" :title="title" ></book-self>
            </div>

            <!-- 第二个页面内容-->
            <div class="item-container" :title="title" :style="contentStyle" >
                <!-- 排行 -->
                <rank :contentHeight="contentHeight" @changLoading="changLoading" ></rank>
            </div>

            <!-- 第三个页面内容 分类-->
            <div class="item-container" :title="title" :style="contentStyle">
                <sort :contentHeight="contentHeight" :title="title" @changLoading="changLoading"></sort>
            </div>

            <!-- 第四个页面内容 书城-->
            <div class="item-container" :title="title" :style="contentStyle">
                <book-city :contentHeight="contentHeight" :title="title" @changLoading="changLoading"></book-city>
            </div>
        </wxc-tab-bar>
        <wxc-loading :show="isShow" ></wxc-loading>
    </div>

</template>

<style scoped>
    .item-container {
        width: 750px;
        background-color: #f2f3f4;
        /*align-items: center;*/
        /*justify-content: center;*/
    }
    .wxc-tab-bar{
        margin-top: 90px;
    }
</style>
<script>
    import {WxcTabBar, Utils, WxcLoading} from 'weex-ui';
    import BookSelf from '../components/bookslef/BookSelf';
    // https://github.com/alibaba/weex-ui/blob/master/example/tab-bar/config.js
    import Config from '../util/MainTabConfig.js';
    import MainTopBar from '../components/bar/MainTopBar';
    import Sort from '../components/sort/Sort';
    import Rank from '../components/rank/Rank';
    import BookCity from '../components/bookCity/BookCity';
    import {getRealScreenHeight} from "../util/Config";


    export default {
        components: {WxcTabBar, BookSelf, MainTopBar, Sort, Rank, BookCity, WxcLoading},
        data() {
            return {
                tabTitles: Config.tabIconFontTitles,
                tabStyles: Config.tabIconFontStyles,
                title: Config.tabTitles[0].title,
                contentStyle:{},
                contentHeight:0,
                tabPageHeight:0,
                titleType: 'iconFont',
                currentPage: 0,
                isShow:false,
            }
        },
        mounted() {
            this.tabPageHeight =  getRealScreenHeight(Utils);
            // 如果页面没有导航栏，可以用下面这个计算高度的方法
            // const tabPageHeight = env.deviceHeight / env.deviceWidth * 750;
            const {tabStyles} = this;
            this.contentHeight= this.tabPageHeight - tabStyles.height - 90;
            this.contentStyle = {height: (this.contentHeight) + 'px'};
        },
        methods: {
            wxcTabBarCurrentTabSelected(e) {
                const index = e.page;
                this.currentPage = index;
                this.title = this.tabTitles[index].title;
            },
            changLoading(obj){
                this.isShow = obj.isShow;
            },
        }
    };
</script>